<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>调用接口</title>
  <!-- 引入jquery包 -->
  <script src="jquery-1.11.3.min.js"></script>
  <!-- 引入api接口 -->
  <script src="api.js"></script>
</head>

<body>
  <div class="getHttp">
    <h2>初始参数</h2>
    <hr />
    <b>- 请求域名</b>
    <div class="">
      <select class="form-control obpm-select">
        <option>http://</option>
        <option>https://</option>
      </select>
      <input class="form-control obpm-input" id="address" placeholder="例如：localhost:80/obpm" value="localhost:80/obpm" />
    </div>
    <b>- 密钥（secret）</b>
    <div class="">
      <input class="form-control obpm-input" id="secret" placeholder="输入：密钥" value="11ed-f6e2-9c523b30-8689-193378628df2" /><label> 密钥，从MANAGER -> Open API中获取</label>
    </div>
    <b>- 用户账号</b>
    <div class="">
      <input class="form-control obpm-input" id="userno" placeholder="输入：用户账号" value="admin1" /><label> 模拟提交用到的用户</label>
    </div>
    <b>- 软件ID</b>
    <div class="">
      <input class="form-control obpm-input" id="appid" placeholder="输入：软件ID" value="__AKMxwsWpiXQiUKuBDUH" /><label> BPM软件ID</label>
    </div>
    <b>- 流程ID</b>
    <div class="">
      <input class="form-control obpm-input" id="flowid" placeholder="输入：流程ID" value="__TUDLceblQQLw60lIdpf" /><label> BPM流程ID，从DESIGNER流程设计中获取</label>
    </div>
  </div>
  <div>
    <h2 >演示流程</h2>
    <hr />
    <div><span class="flow-node start-node">开始</span>-><span id="1684570183165" class="flow-node">员工发起</span>-><span id="1684570185423" class="flow-node">主管审核</span>-><span id="1684570249120" class="flow-node">经理审批</span>-><span class="flow-node end-node">结束</span></div>
    <h3>流程运行信息</h3>
    <div>当前流程实例ID：<span id="instanceid">无</span></div>
    <div>当前节点ID：<span id="currnodeid">无</span></div>
  </div>
  <h2 >API方法说明</h2>
  <hr />
  <div class="activityTable">
    <h3>获取accessToken</h3>
    <table border="1"><tr><td>功能</td><td>获取accessToken</td></tr>
    <tr><td>请求路径：</td><td>/api/rest/accessToken?secret={secret}</td></tr>
    <tr><td>请求类型：</td><td>GET</td></tr>
    <tr><td>请求参数：</td><td>secret---->后台企业域Open API密钥</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary getToken">获取accessToken</a>
     先执行获取访问令牌，再执行其它方法。返回值： <br />
     <input class="form-control obpm-input" id="accesstoken" readonly value="" /><br/>

    <h3>发起流程</h3>
    <table border="1"><tr><td>功能</td><td>发起流程</td></tr>
    <tr><td>请求路径：</td><td>/api/rest/bpm/runtime/start?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&flowId={flowId}</td></tr>
    <tr><td>请求类型：</td><td>请求类型：POST</td></tr>
    <tr><td>请求参数：</td><td>accessToken---->访问令牌  applicationId---->软件id userCode---->用户账号 flowId---->流程id dataJson---->包体</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary initiateFlow">发起流程</a> <label> 流程实例ID = [业务唯一ID]--[流程ID]</label><input class="form-control obpm-input" id="bizid" value="" /><input id='getid' type='button' value="重新获取"/><br/>

    <h3>提交流程</h3>
    <b>第1步：</b>
    <table border="1"><tr><td>功能</td><td>获取流程提交面板</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/query/submission?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&flowId={flowId}&instanceId={instanceId}</td></tr>
      <tr><td>请求类型：</td><td>POST</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌 applicationId---->软件id  userCode---->用户账号  flowId---->流程id  instanceId---->流程实例id  dataJson---->包体</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary getFlowPanel">获取流程提交面板</a>
  
    <div>下一步流程节点信息，返回下一步可到达的流程节点（一个或多个）：<span id="nextnodes">无</span></div>

    <b>第2步：</b>
    <table border="1"><tr><td>功能</td><td>提交流程</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/runtime/submission?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&comment={comment}&instanceId={instanceId}&nextNodeIds={nextNodeIds}&flowType={flowType}&currNodeId={currNodeId}</td></tr>
      <tr><td>请求类型：</td><td>POST</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌 applicationId---->软件id userCode---->用户账号  comment---->提交意见  instanceId---->流程实例id  nextNodeIds---->下一节点数组  flowType---->提交类型  currNodeId---->当前节点id  dataJson---->包体</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary submissionFlow">提交流程</a> 
    或
    <table border="1"><tr><td>功能</td><td>流程提交指定审批人</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/runtime/submission?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&comment={comment}&instanceId={instanceId}&nextNodeIds={nextNodeIds}&flowType={flowType}&currNodeId={currNodeId}</td></tr>
      <tr><td>请求类型：</td><td>POST</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌  applicationId---->软件id   userCode---->用户账号   comment---->提交意见  instanceId---->流程实例id  nextNodeIds---->下一节点数组 flowType---->提交类型  currNodeId---->当前节点id  dataJson---->包体</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary flowApprovers">提交流程（指定审批人）</a>有问题修改下--syp！！

    <h3>回退流程</h3>
    <b>第1步：</b>
    <table border="1"><tr><td>功能</td><td>获取流程回退面板</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/query/back?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&instanceId={instanceId}</td></tr>
      <tr><td>请求类型：</td><td>POST</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌  applicationId---->软件id  userCode---->用户账号  instanceId---->流程实例id</td></tr>
    </table>
 
    <a class="btn obpm-primary getFlowReturn">流程回退</a>
    <div>回退流程节点信息，返回可回退的流程节点（一个或多个）：<span id="backnodes">无</span></div>
    <b>第2步：</b>
    <table border="1"><tr><td>功能</td><td>获取流程回退面板</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/runtime/back?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&comment={comment}&instanceId={instanceId}&nextNodeIds={nextNodeIds}&flowType={flowType}&currNodeId={currNodeId}&flowId={flowId}</td></tr>
      <tr><td>请求类型：</td><td>POST</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌   applicationId---->软件id  userCode---->用户账号  comment---->提交意见  instanceId---->流程实例id  nextNodeIds---->下一节点数组  flowType---->提交类型  currNodeId---->当前节点id  flowId---->流程id  dataJson---->包体</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary flowRejection">流程回退</a>

    <h2>获取其他流程信息</h2>
    <h3>获取我的待办</h3>
    <table border="1"><tr><td>功能</td><td>获取我的待办</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/myPending?userCode={userCode}&accessToken={accessToken}&applicationId={applicationId}&pageNo={pageNo}&linesPerPage={linesPerPage}</td></tr>
      <tr><td>请求类型：</td><td>GET</td></tr>
      <tr><td>请求参数：</td><td>userCode---->用户账号  accessToken---->访问令牌  applicationId---->软件id  pageNo---->第几页 linesPerPage---->每页显示条数</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary getPending">获取我的待办</a>

    <h3>获取文档详情</h3>
    <table border="1"><tr><td>功能</td><td>获取文档详情</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/query/document?accessToken={accessToken}&applicationId={applicationId}&id={id}</td></tr>
      <tr><td>请求类型：</td><td>GET</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌  applicationId---->软件id id---->id（id规则:业务数据id+”--”+流程id）</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary getDocument">获取文档详情</a>

    <h3>获取流程历史</h3>
    <table border="1"><tr><td>功能</td><td>获取流程历史</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/history/flowHistory?accessToken={accessToken}&applicationId={applicationId}&userCode={userCode}&id={id}</td></tr>
      <tr><td>请求类型：</td><td>GET</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌 applicationId---->软件id userCode---->用户账号 id---->id（id规则:业务数据id+ "-- "+流程id）</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary getFlowHistory">获取流程历史</a>

    <h3>获取流程状态</h3>
    <table border="1"><tr><td>功能</td><td>获取流程状态</td></tr>
      <tr><td>请求路径：</td><td>/api/rest/bpm/query/states?accessToken={accessToken}&applicationId={applicationId}&instanceId={instanceId}</td></tr>
      <tr><td>请求类型：</td><td>GET</td></tr>
      <tr><td>请求参数：</td><td>accessToken---->访问令牌 applicationId---->软件id instanceId---->流程实例id</td></tr>
    </table>
    试一试~~<br />
    <a class="btn obpm-primary getFlowType">获取流程状态</a>
  </div>
  <div class="showData">
    <h2>请求接口返回数据</h2>
    <textarea id="result" class="form-control"></textarea>
  </div>
</body>
<script type="text/javascript">
  //定义变量
  var $http; //域名
  var instanceId = "";  //流程实例id
  var pageNo = 1;  //第几页
  var linesPerPage = 5; //每页显示条数
  var currNodeId = "";  //当前节点id
  var nextNodeIds = "";  //下一节点id
  var currentNodeIdFlowReturn = "";  //回退当前节点id
  var nextNodeIdsFlowReturn = "";   //回退下一节点id
  var comment = "pass";  //提交意见

  //获取用户账号
  function getUserNO() {
    return $("#userno").val();
  }

  //获取访问令牌
    function getAccessToken() {
    return $("#accesstoken").val();
  }

  //获取软件ID
  function getAppID() {
    return $("#appid").val();
  }

  //获取流程ID
  function getFlowId() {
    return $("#flowid").val();
  }

  //初始化DocId
  $("#getid").click(function(){
    $("#bizid").val(new Date().getTime() + "--" + $("#flowid").val());
  }).trigger("click");

  function getDocId() {
    return $("#bizid").val();
  }


  //按钮事件
  var btn = {
    $container: undefined,
    params: {},//存储数据
    _bindEvent: function () {
      //1.点击获取accessToken按钮
      btn.$container.off("click", ".getToken").on("click", ".getToken", function () {
        //获取域名
        getHttp();
        //var secret = "11ec-ae92-f289fb5f-9647-61aafad3ffc0";
        var secret = $("#secret").val();
        var result = Api.getToken(secret);
        if (result.errcode == 0) {
          var token = result.data.accessToken;//获取accessToken
          $("#accesstoken").val(token);
        }
      })
      //2.点击发起流程按钮
      btn.$container.off("click", ".initiateFlow").on("click", ".initiateFlow", function () {
        //获取域名
        getHttp();
        var dataJson = {//请求包体
          "id": getDocId(),
          "summary": "",
          "items": {
            "订单数量": "1",
            "订单单价": "2"
          }
        }
        var result = Api.initiateFlow(getAccessToken(), getAppID(), getUserNO(), getFlowId(), dataJson);
        if (result.errcode == 0) {
          instanceId = result.data[0].instanceId;//获取instanceId（流程实例id）
          currNodeId = result.data[0].nodes[0].nodeId;
          $("#instanceid").text(instanceId);
          $("#currnodeid").text(currNodeId);

          var data = JSON.stringify(result);
          $("#result").val(data);

          $(".getFlowType").trigger("click"); // 更新流程状态
        }
      })
      //3.获取我的待办
      btn.$container.off("click", ".getPending").on("click", ".getPending", function () {
        //获取域名
        getHttp();
        var result = Api.getPending(getUserNO(), getAccessToken(), getAppID(), pageNo, linesPerPage);
        if (result.errcode == 0) {
          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
      //4.获取文档详情
      btn.$container.off("click", ".getDocument").on("click", ".getDocument", function () {
        //获取域名
        getHttp();
        var result = Api.getDocument(getAccessToken(), getAppID(), getDocId());
        if (result.errcode == 0) {
          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
      //5.获取流程提交面板
      btn.$container.off("click", ".getFlowPanel").on("click", ".getFlowPanel", function () {
        //获取域名
        getHttp();
        var dataJson = {
          "id": getDocId(),
          "summary": "",
          "items": {
            "订单数量": "1",
            "订单单价": "2"
          }
        }
        var result = Api.getFlowPanel(getAccessToken(), getAppID(), getUserNO(), getFlowId(), instanceId, dataJson);
        if (result.errcode == 0) {
          nextNodeIds = result.data.nextNodes[0].id;//获取nextNodeIds（下一节点id）
          currNodeId = result.data.currentNodeId;//获取currNodeId（当前节点id）
          $("#nextnodes").text(JSON.stringify(result.data.nextNodes));
          
          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
      //6.提交流程
      btn.$container.off("click", ".submissionFlow").on("click", ".submissionFlow", function () {
        //获取域名
        getHttp();
        var dataJson = {
          "id": getDocId(),
          "summary": "",
          "items": {
            "订单数量": "1",
            "订单单价": "2"
          }
        }
        var flowType = 80; // 类型提交
        var result = Api.submissionFlow(getAccessToken(), getAppID(), getUserNO(), comment, instanceId, nextNodeIds, flowType, currNodeId, dataJson);
        if (result.errcode == 0) {
          var data = JSON.stringify(result);
          $("#result").val(data);
          
          $(".getFlowType").trigger("click"); // 更新流程状态
        }
      })
      //7.获取流程历史
      btn.$container.off("click", ".getFlowHistory").on("click", ".getFlowHistory", function () {
        //获取域名
        getHttp();
        var result = Api.getFlowHistory(getAccessToken(), getAppID(), getUserNO(), getDocId());
        if (result.errcode == 0) {
          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
      //8.获取流程状态
      btn.$container.off("click", ".getFlowType").on("click", ".getFlowType", function () {
        //获取域名
        getHttp();
        var result = Api.getFlowType(getAccessToken(), getAppID(), instanceId);
        if (result.errcode == 0) {

          currNodeId = result.data[0].nodes && result.data[0].nodes[0].nodeId;//获取currNodeId（当前节点id）
          $(".flow-node").removeClass("curr-node");
          $("#"+currNodeId).addClass("curr-node");

          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
      //9.获取流程回退面板
      btn.$container.off("click", ".getFlowReturn").on("click", ".getFlowReturn", function () {
        //获取域名
        getHttp();
        var result = Api.getFlowReturn(getAccessToken(), getAppID(), getUserNO(), instanceId);
        if (result.errcode == 0) {
          currentNodeIdFlowReturn = result.data.currentNodeId;//获取currentNodeIdFlowReturn（回退当前节点id）
          nextNodeIdsFlowReturn = result.data.backNodes[0].id;//获取nextNodeIdsFlowReturn（回退下一节点id）
          
          $("#backnodes").text(JSON.stringify(result.data.backNodes));
          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
      //10.流程回退
      btn.$container.off("click", ".flowRejection").on("click", ".flowRejection", function () {
        //获取域名
        getHttp();
        var dataJson = {
          "id": getDocId(),
          "summary": "",
          "items": {
            "订单数量": "1",
            "订单单价": "2"
          }
        }
        var flowType = 81; // 类型-回退
        var result = Api.flowRejection(getAccessToken(), getAppID(), getUserNO(), comment, instanceId, nextNodeIdsFlowReturn, flowType, currentNodeIdFlowReturn, getFlowId(), dataJson);
        if (result.errcode == 0) {
          var data = JSON.stringify(result);
          $("#result").val(data);
          $(".getFlowType").trigger("click"); // 更新流程状态
        }
      })
      //11.流程提交指定审批人
      btn.$container.off("click", ".flowApprovers").on("click", ".flowApprovers", function () {
        //获取域名
        getHttp();
        var dataJson = {
          "id": getDocId(),
          "summary": "",
          "items": {
            "订单数量": "1",
            "订单单价": "2"
          },
          "submitTo": [
            {
              "nodeid": nextNodeIds,
              "userids": "__oP0irhWXGA2oZRusW1d"
            }
          ]
        }
        var flowType = 80; // 类型提交
        var result = Api.flowApprovers(getAccessToken(), getAppID(), getUserNO(), comment, instanceId, nextNodeIds, flowType, currNodeId, dataJson);
        if (result.errcode == 0) {
          var data = JSON.stringify(result);
          $("#result").val(data);
        }
      })
    },
  }
  btn.$container = $(".activityTable");
  btn._bindEvent();
  //获取请求域名
  function getHttp() {
    if($("#address").val() == ""){
      alert("请配置域名");
    }
    $http = $(".obpm-select").val() + $("#address").val();
  }
</script>
<style>
  .activityTable .btn {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .activityTable .obpm-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
  }

  .form-control {
    display: block;
    width: 95%;
    height: 100px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  }
  
  .form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
  }

  .obpm-input,.obpm-select {
    display: inline-block;
    width: 250px;
    height: 20px;
    padding-right: 16px;
  }

  .obpm-select {
    width: auto;
    height: 35px;
  }

  .flow-node {
    border: 1px solid black;
  }

  .start-node {
    background: #0e0;
  }

  .end-node {
    background: #e00;
  }

  .curr-node {
    background: #00e;
  }

</style>

</html>